<template>
  <div class="big-screen-container" :style="{ backgroundImage: `url(https://img1.baidu.com/it/u=553430616,795769268&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500)` }">
    <!-- 这里可以添加一些美化后的元素或内容 -->

    <div id="main1" style="width: 500px;height: 500px"></div>

  </div>
</template>

<script>
import echarts from "echarts";
import {getCarTypeOrBrand} from "@/views/car/datachar/datachar";
import {red} from "chalk";

export default {
  name: "index",
  data() {
    return {
      //默认属性
    };
  },
  methods: {
    //自定义方法

    getCarTypeOrBrand() {
      getCarTypeOrBrand().then(res => {
        console.log(res);
        var chartDom = document.getElementById('main1');
        var myChart = echarts.init(chartDom);
        var option;

        // 假设 res 是以下格式的数组：[{carType: '豪华型', carNum: 3, normalCount: 1, faultCount: 2}, {carType: '小型轿车', carNum: 5, normalCount: 4, faultCount: 1}]
        option = {
          xAxis: {
            type: 'category',
            data: res.data.map(item => item.carType),
            axisLabel: {
              textStyle: {
                color: 'white' // 设置 x 轴字体颜色为绿色，你可以根据需求修改成其他颜色
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: 'white' // 设置 y 轴字体颜色为橙色，你可以根据需求修改成其他颜色
              }
            }
          },
          series: [
            {
              name: '车辆总数',
              data: res.data.map(item => item.carNum),
              type: 'bar'
            },
            {
              name: '正常状态车辆数',
              data: res.data.map(item => item.normalCount),
              type: 'bar'
            },
            {
              name: '故障状态车辆数',
              data: res.data.map(item => item.faultCount),
              type: 'bar'
            }
          ]
        };

        option && myChart.setOption(option);
      });
    },


  },
  created() {
    //初始化
    this.getCarTypeOrBrand();
  },
};
</script>

<style>
.big-screen-container {
  width: 100%;
  height: 100%;
  justify-content: center;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
}
h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

p {
  font-size: 1.5rem;
}
</style>
